<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>元素的样式操作</title>
		<!-- 元素样式操作：直接操作元素的样式下的属性和属性值 
		css()    功能：
		         1个参：传入属性名
				 功能:获取匹配元素集合中第一个元素的css属性值
				 2个参
				 n个参
		width()和height() 功能:匹配元素集合中第一个元素宽高度
		                  无参:获取匹配元素集合中第一个元素宽高度
						  有参:设置匹配元素集合中第一个元素宽高度
						  width(数值)
		outerWidth和outerHeight()
		-->
		
		<style>
			.box{
				background:#fff000 ;
				padding: 20px;
				margin: 20px;
				border: 5px solid red;
			}
			.result{
				margin-top: 10px;
				font-weight: bold;
			}
		</style>
		<script src="../js/jquery-1.11.1.js"></script>
	</head>
	<body>
		<!-- 创建两个div平行 6个按钮 -->
		<!-- css: .box添加样式，背景颜色，内外边距：20px 边框：5px
		          .result添加样式：上外边距：10px
		 -->
		<!-- 显示效果区域 -->
		<div class="box" id="target"></div>
		<button id="getColorbtn">获取颜色属性值</button>
		<button id="setColorbtn">设置颜色效果</button>
		<button id="setbtn">多属性效果</button>
		<button id="gsbtn">获取元素宽度/设置元素宽度</button>
		<button id="dpbtn">获取高度(内边距＋边框)</button>
		<button id="btn"></button>
		<!-- 结果提示功能区域 -->
		<div class="result" id="result"></div>
		<script>
			/* 1.点击 获取颜色属性值 按钮 获取颜色值并且打印页面上 */
			$("#getColorbtn").click(function(){
				// 获取css属性值方式:传入属性名即可
				var bgColor=$(".box").css("background-color");
				//页面上打印属性
				$("#result").text("获取的属性值是:"+bgColor)
			});
		/*2.点击 设置颜色效果 按钮 设置颜色值并且打印页面上*/
		$("#setColorbtn").click(function(){
			$(".box").css("background-color","orange");
			$("#result").text("改变颜色为：橙色");
		});
		/*3.点击设置多属性效果 按钮 圆 背景色，阴影*/
		$("#setbtn").click(function(){
			$(".box").css({"background-image":"url(../img/1.pong)",
			             "border":"5px solid #ff0",
						 "width":"300px"
						 "height":"300px",
						 "background-size":"100% 100%",
						 "border-radius":"50%",
						 "box-show":"5px 5px 10px #ff0"
						 });
		});
		/*4.点击 获取元素宽度/设置元素宽度*/
		$("#gsbtn").click(function(){
			var w=$(".box").width();
			$("#result").text("获取宽度是："+w+"px")
		});
		/*5.点击 获取高度 按钮 计算box空间高度*/
		$("#bpbtn").click(function(){
			var bp=$(".box").outerHeight();
			$("#result").text("获取高度是："+bp+"px")
		});
		$("#bpmbtn").click(function(){
			var bpm=$(".box").outerHeight();
			$("#result").text("获取高度是："+bpm+"px")
		});
		</script>
	</body>
</html>